<template>
  <div class="map_box">
    <div class="v_title">{{ header.name ? header.name : '' }}</div>
    <div class="v_content">
      <div class="left">
        <div class="panel" v-for=" (item, index) in left" :key="index">
          <view-card :panelData="item" />
        </div>
      </div>
      <div class="center">
        <china :graphData="graphs"></china>
      </div>
      <div class="right">
        <div class="panel" v-for=" (item, index) in right" :key="index">
          <view-card :panelData="item" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'vb-index',
  data() {
    return {
      header: {},
      left: {},
      center: {},
      right: {},
      graphs: [],
    };
  },
  created: function () {
    this.getViews(1)
  },
  components: {
    china: () => import('@/components/map/china'),
    viewCard: () => import('@/components/board-card'),
  },
  methods: {
    getViews(key) {
      // 开始增加
      sa.ajax('/vsb/board', { key: key }, function (res) {
        this.header = res.data.header
        this.left = res.data.left
        this.center = res.data.center
        this.right = res.data.right
        this.graphs = res.data.graphs
      }.bind(this), { type: 'get' });
    },
  }
};
</script>
<style lang="scss" scoped>
.map_box {
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
  height: calc(100vh - 84px);
}

.v_title {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 60px;
  font-size: xx-large;
  font-weight: 800;
  color: rgb(0, 109, 211);
  padding: 10px;
  font-family: cursive;
  box-shadow: 0px 2px 4px 4px #cbd8e3;
  border-radius: 5px;
}

.v_content {
  display: flex;
  justify-content: space-around;
  min-height: calc(100vh - 170px);
}

.left,
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 24%;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 15px;
  width: 56%;
  min-height: 100%;
}

.panel {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0px 0px 6px 6px #002044e0;
  min-height: 200px;
  max-height: 30%;
}

.panel:hover {
  box-shadow: 0px 0px 6px 8px #003b88e0;
  transition: box-shadow 0.5s;
}
</style>